<template>
    <div class="container-fluid display-flex">
        <div class="container-iphone">
            <div class="w-100d h-100d display-flex">
                <div class="w-100d">
                    <div class="iphone" v-bind:style="{backgroundImage: 'url(' + image + ')'}">
                        <button class="btn btn-success ">
                            <icon class="fa-edit" />
                        </button>
                        <div class="iphone-screen" id="iphone-data">
                            <draggable v-model="contents" :options="{draggable:'.item'}" element="div">
                                <div v-for="(content, index) in contents" :key="index" v-html="content.name"
                                     :data-index="index" class="item">

                                </div>
                            </draggable>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-action">
            <div v-show="edit !== undefined">
                <div class="form-group" v-for="(attr, index) in editAttr" :key="index" v-if="attr.enable === true">
                    <div class="input-group">
                        <div class="input-group-addon text-w w100">{{attr.label}}</div>
                        <input :type="attr.inputType" class="form-control text-w" v-model="attr.value"
                               @change="changeInput">
                    </div>
                </div>
                <div class="form-group">
                    <button class="btn btn-block btn-success" @click="saveAttr">Save</button>
                </div>
            </div>
        </div>
        <div class="container-body">
            <span class="btn-type" @click="addLinkTag">链接</span>
            <span class="btn-type">段落</span>
            <span class="btn-type">图片</span>
        </div>
    </div>
</template>

<style lang="scss">
    @import "editor.scss";
</style>

<script>
    /* eslint-disable no-undef */

    import QuillEditor from 'vue-quill-editor/src/editor.vue';
    import Icon from '../widget/Icon.vue';
    import Draggable from 'vuedraggable';

    export default {
        components: {
            Icon,
            QuillEditor,
            Draggable
        },
        name: 'editor',
        data () {
            return {
                image: require('../../assets/image/ip.jpg'),
                contents: [],
                edit: undefined,
                editAttr: {
                    fontSize: {label: '字体大小', value: '', enable: false, inputType: 'text', type: 'css'},
                    color: {label: '颜色', value: '', enable: false, inputType: 'color', type: 'css'},
                    padding: {label: '间距', value: '', enable: false, inputType: 'text', type: 'css'},
                    html: {label: 'Html', value: '', enable: false, inputType: 'text', type: 'param'},
                    text: {label: 'Html', value: '', enable: false, inputType: 'text', type: 'param'},
                    href: {label: '链接', value: '', enable: false, inputType: 'text', type: 'attr'}
                }
            };
        },
        methods: {
            iphoneDataClick (e) {
                let em = $(e.target);
                if (em.attr('id') === 'iphone-data') {
                    return;
                }
                this.edit = em;
                let node = this.edit.get(0).tagName;
                this.initialiseEditAttr();
                switch (node) {
                    case 'A': {
                        this.setEditAttrEnable(['fontSize', 'color', 'padding', 'href']);
                        break;
                    }
                }
            },
            addLinkTag () {
                this.contents.push({name: '<a href="#"> Link </a>'});
            },
            changeInput () {
                this.saveAttr();
            },
            saveAttr () {
                $.each(this.editAttr, (key, item) => {
                    if (item.enable !== false) {
                        switch (item.type) {
                            case 'param': {
                                // this.edit.item = this.edit.val();
                                break;
                            }
                            case 'css': {
                                this.edit.css(key, item.value);
                                break;
                            }
                            case 'attr': {
                                this.edit.attr(key, item.value);
                                break;
                            }
                        }
                    }
                });
            },
            initialiseEditAttr () {
                $.each(this.editAttr, (key) => {
                    this.editAttr[key].enable = false;
                });
            },
            setEditAttrEnable ($attr) {
                $attr.forEach((item) => {
                    this.editAttr[item].enable = true;
                    switch (this.editAttr[item].type) {
                        case 'param': {
                            this.editAttr[item].value = this.edit.val();
                            break;
                        }
                        case 'css': {
                            if (item === 'color') {
                                this.editAttr[item].value = this.colorRGB2Hex(this.edit.css(item));
                            } else {
                                this.editAttr[item].value = this.edit.css(item);
                            }
                            break;
                        }
                        case 'attr': {
                            this.editAttr[item].value = this.edit.attr(item);
                            break;
                        }
                    }
                });
            },
            colorRGB2Hex (color) {
                let rgb = color.split(',');
                let r = parseInt(rgb[0].split('(')[1]);
                let g = parseInt(rgb[1]);
                let b = parseInt(rgb[2].split(')')[0]);

                let hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
                return hex;
            }
        },
        computed: {},
        mounted () {
            $('#iphone-data').click(e => {
                e.preventDefault();
                this.iphoneDataClick(e);
            });
        },
        watch: {}
    };
</script>
